<template>
	<view class="index-view">
		<view class="initial-Share-view">
			<view class="padding-30 margin-top13">
				<!-- 轮播图 -->
				<u-swiper :list="list" :height="400" bg-color="#C62F23" border-radius="20"></u-swiper>
			</view>
		</view>
		<!-- 宫格 -->
		<view class="gird-view">
			<view class="gird-view-list">
				<view class="gird-view-item" v-for="(item,index) in girdList" :key="index" @click="goToUrl(item.path)">
					<image class="gird-view-image" :src="item.image" mode=""></image>
					<text class="gird-view-text">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 大图 -->
		<view class="ad-view">
			<image class="ad-view-image" src="@/static/index/06.png"></image>
			<view class="ad-view-btn" @click="goToUrl('/pages/index/index-list/commemorative-coin')">购买</view>
		</view>
		<!-- 抽奖标题 -->
		<view class="draw-view">
			<image class="draw-view-image" src="../../static/index/03.png" mode=""></image>
			<view class="draw-view-text">幸运大转盘</view>
		</view>
		<!-- 抽奖 -->
		<view class="dialer-view">
			<image class="dialer-view-image" src="../../static/index/02.png" mode=""></image>
			<lime-dialer size="500rpx" ref="dialer" @click="onClick" :prizeList="prizeList" @done="onDone">
			</lime-dialer>
		</view>
		<view class="dialer-view-btn1">
			<view class="dialer-view-btn">恭喜您获得抽奖机会{{userInfo.num}}次</view>
		</view>
		<!-- 梦创物联福 -->
		<view class="tips-view">
			<line-title name="梦创物联福"></line-title>
		</view>
		<!-- 抽奖领取 -->
		<view class="tips-view">
			<view class="tips-view-desc1">
				<view class="dialer-card-list">
					<view class="dialer-card-item" v-for="(item,index) in cardList" :key="index">
						<view class="dialer-card-item1">
							<u-badge type="error" :count="item.five_value" :offset="[-12,-10]" :overflow-count="99"></u-badge>
							<view class="dialer-card-border">
								<image class="dialer-card-image" src="@/static/index/10.png" mode=""></image>
								<view class="dialer-card-btn">{{item.name}}</view>
							</view>
						</view>
						<template v-if="item.five_num == 0">
							<button-round name="领取" fontSize="12px" borderRadius="22rpx" backgroundColor="#ffffff" color="#999999"></button-round>
						</template>
						<template v-else>
							<button-round name="领取" fontSize="12px" borderRadius="22rpx" @click="getFive(index)"></button-round>
						</template>
					</view>
				</view>
				<view class="dialer-desc">
					<view class="dialer-desc-left">
						梦创物联五福集齐可领取1000000元
					</view>
					<button-round name="领取" fontSize="12px" borderRadius="22rpx" @click="receiveFive"></button-round>
				</view>
			</view>
		</view>
		<!-- tips -->
		<view class="tips-view">
			<view class="tips-view-desc">
				{{tips[0]}}{{tips[1]}}
			</view>
		</view>
		<!-- 公告弹窗 -->
		<u-popup v-model="homeShow" mode="center" border-radius="20" @close="popupClose">
			<view class="popup-view">
				<scroll-view scroll-y="true" scroll-x="true" style="height: 850rpx;width: 610rpx;padding: 30rpx;">
					<view v-html="poptips">
					
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 抽奖弹窗 -->
		<popup-view :popupObject="popupObject" :popShow="show" @clickShow="popUpViewShow"></popup-view>
	    <!-- 集齐五福领取弹窗 -->
		<popup-view :popupObject="popupObject1" :popShow="show1" @clickShow="popUpViewShow1"></popup-view>
	</view>
</template>

<script>
	import gird from "@/components/gird/gird.vue"
	import buttonRound from "@/components/button/button-round.vue"
	import limeDialer from "@/components/draw/lime-dialer/components/l-dialer/l-dialer.vue"
	import lineTitle from "@/components/title/line-title.vue"
	import popupView from "@/components/popup/popup-view.vue"
	export default {
		components: {
			gird,
			limeDialer,
			buttonRound,
			lineTitle,
			popupView
		},
		data() {
			return {
				list: [],
				girdList: [{
						image: '../../static/tabbar/index03.png',
						name: '实名认证',
						path: '/pages/index/index-list/real-name'
					},
					{
						image: '../../static/tabbar/initialShare03.png',
						name: '圆梦证书',
						path: '/pages/index/index-list/certificate',
					},
					{
						image: '../../static/tabbar/newyear03.png',
						name: '扶持基金',
						path: '/pages/index/index-list/inviting-goodGift'
					},
					{
						image: '../../static/tabbar/mine03.png',
						name: '邀请好友',
						path: '/pages/mine/mine-list/invite-friends'
					}
				],
				// 奖品列表，
				prizeList: [],
				// 卡片列表
				cardList: [],
				// 弹窗
				show: false,
				popupObject:{
					title:'恭喜您',
					desc:'抽中华为手机',
					btn:'确认',
					tips:'可在个人中心>梦创礼品中领取'
				},
				show1: false,
				popupObject1:{
					title:'恭喜您',
					desc:'集齐五福',
					btn:'确认',
					tips:''
				},
				poptips:'',
				tips:[],
				homeShow: true,
				userInfo:{}
			}
		},
		onShow() {
			// 先检查本地是否有登录状态,如果有就不显示弹窗,如果没有就显示弹唱.
			let loginStatus = uni.getStorageSync('loginStatus')
			if(loginStatus&&loginStatus == '登录'){
				this.homeShow = false
			}else{
				this.homeShow = true
			}
			this.getIndex()
		},
		methods: {
			getFive(index){
				let value = index + 1
				this.$http.post(this.$api.getFive,{type:value},{token:true}).then(res=>{
					if(res.code == 1){
						this.$tools.toast('领取成功')
						this.getUserInfo()
					}
				})
			},
			popupClose(){
				uni.setStorageSync('loginStatus','登录')
			},
			popUpViewShow(status){
				this.show = status
			},
			popUpViewShow1(status){
				this.show1 = status
			},
			// 跳转
			goToUrl(path) {
				uni.navigateTo({
					url: path
				})
			},
			// 抽奖
			onDone(index) {
				this.show = true
			},
			onClick() {
				if(this.userInfo.num==0){
					return false
				}
				// 奖品的索引
				this.$http.post(this.$api.receive,{},{token:true}).then(res=>{
					let index = this.prizeList.findIndex(item=>{
						return item.id == res.data.id
					})
					this.$refs.dialer.run(index)
					this.popupObject.desc = res.data.name
					this.getUserInfo()
				})
			},
			getIndex(){
				this.$http.post(this.$api.index,{},{token:true}).then(res=>{
					this.list = res.data.lb.map(item=>{
						return item.image
					})
					this.poptips = res.data.poptips
					this.prizeList = res.data.draw
					this.tips = res.data.tips
					this.cardList = res.data.five.blessing
					this.getUserInfo()
				})
			},
			getUserInfo() {
				this.$http.post(this.$api.getUserInfo, {}, {
					token: true
				}).then(res => {
					this.userInfo = res.data
					this.cardList[0].five_value = res.data.five_1
					this.cardList[1].five_value = res.data.five_2
					this.cardList[2].five_value = res.data.five_3
					this.cardList[3].five_value = res.data.five_4
					this.cardList[4].five_value = res.data.five_5
				})
			},
			receiveFive(){
				this.$http.post(this.$api.receiveFive,{},{token:true}).then(res=>{
					if(res.code == 1){
						// this.$tools.toast('领取成功')
						this.show1 = true
						this.getUserInfo()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// 头部
	.initial-Share-view {
		width: 100%;
		height: 550rpx;
		background: url('../../static/index/18.png')no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}
	.margin-top13 {
		margin-top: 80rpx;
	}
	// 领奖
	.dialer-desc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 0.5px solid #F1D99B;
		margin-top: 30rpx;
	}

	.dialer-desc-left {
		font-size: 12px;
		color: #C52B21;
		padding: 30rpx 0;
	}

	.dialer-card-btn {
		padding: 5rpx 5rpx;
		font-size: 10px;
		color: #C52B21;
		background-color: #FFECBC;
		border-radius: 3px;
		margin: 0 10rpx 10rpx 10rpx;
	}

	.dialer-card-image {
		width: 104rpx;
		height: 104rpx;
	}

	.dialer-card-border {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px solid #FFECBC;
		border-radius: 15rpx;
	}

	.dialer-card-item1 {
		position: relative;
		padding: 10rpx;
		background: linear-gradient(to bottom, #FA754C, #CE3527);
		border-radius: 15rpx;
		margin-bottom: 15rpx;
	}

	.dialer-card-item:last-child {
		margin-right: 0;
	}

	.dialer-card-item {
		width: 23%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 5px;
	}

	.dialer-card-list {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.dialer-receive-title1 {
		font-size: 13px;
		color: #FFF6DF;
		margin: 0 30rpx;
	}

	.dialer-receive-icon {
		width: 80rpx;
		height: 2rpx;
		border-radius: 12rpx;
		opacity: 1;
		background: #FFF6DF;
	}

	.dialer-receive-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tips-view-desc1 {
		padding: 30rpx 30rpx 0rpx 30rpx;
		border-radius: 30rpx;
		opacity: 1;
		background: #FFF0CA;
	}

	.tips-view-desc {
		padding: 30rpx;
		font-size: 13px;
		color: #C52B21;
		border-radius: 30rpx;
		opacity: 1;
		background: #FFF0CA;
	}

	.tips-view {
		padding: 30rpx;
	}

	.dialer-view-btn1 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dialer-view-btn {
		padding: 20rpx 80rpx;
		border-radius: 102rpx;
		opacity: 1;
		color: #FFE7C2;
		box-sizing: border-box;
		border: 2px solid #FFE7C2;
		background: linear-gradient(180deg, #FF7B4F 0%, #ED3A29 95%);
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3), inset 0px 0px 1px 0px #DE6C46;
	}

	.dialer-view-image {
		width: 100%;
		height: 660rpx;
		position: absolute;
		top: 28rpx;
		left: 0rpx;
	}

	.dialer-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 700rpx;
		background: url("../../static/index/07.png")no-repeat;
		background-size: 100% 700rpx;
		position: relative;
	}

	.draw-view {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.draw-view-image {
		width: 500rpx;
		height: 120rpx;
	}

	.draw-view-text {
		position: absolute;
		top: 30rpx;
		left: 300rpx;
		font-size: 16px;
		color: #FBC284;
	}

	.ad-view-btn {
		position: absolute;
		bottom: 60rpx;
		right: 50rpx;
		font-size: 15px;
		color: #BE1A0A;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
	}

	.ad-view-image {
		width: 100%;
		height: 445rpx;
	}

	.ad-view {
		position: relative;
		padding: 30rpx;
	}

	.gird-view-text {
		width: 13px;
		color: #ffffff;
		width: 100%;
		text-align: center;
	}

	.gird-view-image {
		width: 46px;
		height: 46px;
		margin-bottom: 20rpx;
	}

	.gird-view-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 25%;
	}

	.gird-view-list {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.gird-view {
		width: 100%;
		padding: 30rpx;
		background-image: linear-gradient(to right, #B8311C, #D45836, #B8311C);
	}

	.index-header-image {
		width: 100%;
		height: 600rpx;
	}

	.swiper-view {
		// margin-top: -450rpx;
	}
</style>